<template>
	<view class="wrap">
		<watermark :text="shuiyin" opacity="0.3"></watermark>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{getTitle()}}</block>
		</cu-custom>
		<u-sticky>
			<view class="search">
				<u-search v-model="keywords" @custom="search" @search="search" @clear="clearSearch"></u-search>
			</view>
			<u-tabs :list="list" :scrollable="false" :current="current" @change="change" lineWidth="30"
				lineColor="#f56c6c" :activeStyle="{
			    color: '#303133',
			    fontWeight: '700',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)'
			}"></u-tabs>
		</u-sticky>
		<view>
			<!-- 
			<view style="height: 2rpx;"></view> -->
			<scroll-view class="scroll-list msg-list-item" scroll-y="true">
				<template v-for="(item,index) in mesgList">
					<view :key="index" class="msg-time">{{item.dateStr}}</view>
					<u-card :key="index+1" class="task-list-item" :border="false" padding="20" margin="10rpx 20rpx">
						<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								<image v-if="current === 0" class="user-images" src="/static/msg/active.png"></image>
								<image v-if="current === 1" class="user-images" src="/static/msg/auditOk.png"></image>
								<!-- {{item.pp.replace('请处理由','').split('发起的')[0]+'的'+item.billTitle}} -->
								{{item.billTitle}}
							</view>
							<view style="color: #999999;font-size: 22rpx;">{{item.timeStr}}</view>
						</view>
						<view class="" slot="body" @click="current === 1 ? handleBill(1,item):''">
							<view class="u-body-item u-flex  u-col-between u-p-t-0">
								<view class="u-body-item-title">
									{{item.pp}}
								</view>
							</view>
							<u-row gutter="16">
								<u-col span="8">
									<view class="apply-text"><span>发送人：</span>{{item.senderName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16">

								<u-col span="12">
									<view class="apply-text"><span>发送时间：</span>{{item.sendTime}}</view>
								</u-col>
							</u-row>
						</view>
						<view class="apply-list-foot" slot="foot" v-if="current === 0">
							<u-row gutter="16">
								<u-col span="6" text-align="center">
									<u-button text="查看详情" shape="circle" icon="eye" size="small" type="primary"
										@click="handleBill(1,item)"></u-button>
									<!-- <view class="agree-text">查看详情</view> -->
								</u-col>
								<u-col span="6" text-align="center">
									<!-- <view class="refuse-text">审批</view> -->
									<u-button type="error" hoverStartTime=300 size="small" shape="circle" text="审批"
										@click="handleBill(2,item)"></u-button>
								</u-col>
							</u-row>
						</view>
						<view v-if="current === 1" class="apply-list-foot" slot="foot"
							style="text-align: right;color: #58ca93;">
							审批完成
						</view>
					</u-card>
				</template>

				<u-divider text="已经到底了"></u-divider>
			</scroll-view>
		</view>

	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	import {
		getTodoAction,
		getAuditPageTitle,
		getUser,
	} from '../../network/service/addressBook.js'
	import watermark from "../../components/watermark.vue"
	export default {
		components: {
			watermark,
		},
		data() {
			return {
				shuiyin: '',
				keywords: '',
				list: [{
					name: '待办'
				}, {
					name: '已办',
				}],
				// 业务类型
				bizType: '',
				// 消息数据
				mesgList: [],
				m2mSimflowList: [],
				m2mOrderFlowList: [],
				// 0 待办 1 已半 
				current: 0,
				status: 'loadmore',
				iconType: 'circle',
				isDot: false,
				loadText: {
					loadmore: '点击加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},

			};
		},
		onLoad(option) {

			this.bizType = Number(option.bizType)
			this.getMesgList()
		},
		onReady() {
			let screenW = 0
			let screenH = 0
			uni.getSystemInfo({
				success(res) {
					screenW = res.windowWidth
					screenH = res.windowHeight
				}
			})

			uni.createSelectorQuery().select('.queryBox').boundingClientRect(data => {
				this.topHeight = data && data.height ? data.height : 60
			}).exec()

			this.scrollHeight = (screenH - 80 - this.topHeight) * (750 / screenW) + 'rpx'
		},
		created() {

			const userInfo = getUser()
			this.shuiyin = userInfo.name + '' + userInfo.userName.substr(7, 11)
		},
		mounted() {
			this.getMesgList()
		},
		methods: {
			change(item) {
				this.current = item.index;
				this.getMesgList()
			},
			navTo(url) {
				uni.navigateTo({
					//animationType: 'pop-out',
					url: url
				});
			},
			search(value) {
				this.getMesgList()
			},
			clearSearch() {
				this.keywords = ''
				this.getMesgList()
			},
			getTitle() {
				return getAuditPageTitle(this.bizType)
			},
			// 查询消息
			getMesgList() {

				const userInfo = uni.getStorageSync("userInfo")
				let params = {
					url: '/message/getMessageByCondition',
					method: 'POST',
					data: {
						typeParams: 60,
						uid: userInfo.uid,
						companyId: userInfo.companyId,
						bizType: this.bizType,
						billStatus: this.current,
						createPerson: userInfo.person,
						keyWord: this.keywords
					},
				}
				getTodoAction(params).then(res => {

					res.data.list.map(item => {
						item.pp = item.title && item.title.replace('[{', '')
							.replace('}]', '');
						item.dateStr = item.createTime.split(' ')[0];
						item.timeStr = item.createTime.split(' ')[1];
						item.billTitle = getAuditPageTitle(this.bizType);

					})
					this.mesgList = res.data.list
				})

			},
			// 处理单据
			handleBill(type, info) {
				this.navTo('/pages/msg/details?viewCode=' + type + '&info=' + JSON.stringify(info))
			}


		}
	};
</script>
<style lang="scss">
	@import '../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.u-dropdown {
		background: #ffffff;
	}

	.msg-time {
		font-size: 26rpx;
		padding: 5px 0;
		color: #999999;
		text-align: center;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
		padding: 11px;
		//justify-content: space-around;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 32px;
			height: 32px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}

	.agree-text {
		color: #4094ff;
	}

	.refuse-text {
		color: #ff4400;
	}


	/deep/.u-tabs__wrapper__nav {
		background: #fff;
	}
</style>